1. Introduction
This project consists of 1 Mobile App, 1 Admin Portal clubbed Website.
Technologies Used in Web App are:
We have built the Mobile App using React Native(Expo) for iOS and Android
The main Technologies used are
2. Help And Support
Follow the link for more info on support.
HELP & SUPPORT
3. Environment Setup
To run the 2 Apps you need following things in your development machine as mentioned below.
A. Download NodeJs
-
- Download instructions
- Mac users: For OS X, download the .pkg file form below link.(v.20.19.1 recommended)
- Windows users: Download either the MSI or the .exe form below link, whichever you prefer .(v.20.19.1 recommended)
- After Installing NodeJs you'll most likely need to restart your computer.
To ensure that NodeJs is installed correctly, you can type:
node -v
NOTE: DO NOT IGNORE THE NODE JS VERSION. IT HAS TO BE 20.19.x
B. Install Git (Windows PC Only)
- Download and install the latest from this link. https://git-scm.com/
C. Install Python 3.12.0 (M1 Mac Only)
- Download and install from this link. https://www.python.org/downloads/release/python-2718/
D. Install Eas Cli
In your command prompt, type:
npm install -g eas-cli
Create a account in https://expo.io/signup and use the same account to signin on command prompt using below command
eas login
E. Install Yarn
In your command prompt, type:
npm install -g yarn
F. Install Firebase Tools and Login to Firebase
In your command prompt, type:
npm install -g firebase-tools
You have to login in firebase from the command prompt using below command
firebase login
G. Copy Firebase Login Token
An access token from firebase is also required by the Eas build service. Again signin in firebase using below command
firebase login:ci
Step 1 Select Google account
Step 2 Allow the firebase
You got success message
Go to command prompt and copy the token
Now go to your Expo account -> Select the project -> Create a Environment variables
Use name FIREBASE_TOKEN and in value paste the token and Visibility select Secret and click on Add Variables
4. Project Configuration
Step 1 First Extract the Zip file downloaded from codecanyon.
Open the folder 'Sourecode' in Code Editor after extracting the Zip
Step 2 Change the App Name and App Description in the /functions/config.json
The app_identifier is very important. It is also known as Package Name in Android World and Bundle Identifier in iOS World
It is written like com.your-organisation-website-name.app-namee.g. Exicube has developed a Taxi App. Then the identifier can be com.exicube.taxi
Note: The app_identifier should be in lowercase only.
Step 3 Change all Logo, Splash and other images related to branding kept in assets folders
- mobile-app/assets/images/logo1024x1024.png
- mobile-app/assets/images/splash.png
- mobile-app/assets/images/splash_ios.png
- mobile-app/assets/images/logo96x96.png
- mobile-app/assets/images/logo165x90white.png
- mobile-app/assets/images/intro.jpg
- mobile-app/assets/images/bg.jpg
- web-app/public/favicon.ico
- web-app/public/apple-icon.png
- web-app/src/assets/img/logo138x75black.png
- web-app/src/assets/img/logo138x75white.png
- web-app/src/assets/img/logo192x192.png
Note: Do not change any dimension or file name of the images given. Only overwrite the content of image using image editor.
Step 4 Go to Firebase Console and then create a new project as shown in picture.
Type in your project name as shown in picture.
Accept terms and click on 'Create Project' as shown in picture.
When your project is ready click the 'Continue' button as shown in picture.
Create a new Realtime Database as shown in picture.
NOTE: Update billing Spark to Blaze
Start in locked mode and then enable it.
Create a new Storage as shown in picture.
Start in Production mode and then next it.
Step 5 Configure GCP Server Location.
1. Select Default GCP resource location in Firebase Portal -> Settings -> General
2. Copy Project ID from Firebase Portal -> Settings -> General and paste in the /functions/config.json as shown below. Change the XXXXXX only. Do not tamper with the JSON structure.
Step 6 Change the Google map keys in the same file /functions/config.json.
Replace XXXXXX only. You can use same API key in 4 places or 4 different API keys for the 4 different platforms to better monitor platform wise usage and advance security.
Follow the Steps below to collect a valid Google API Key
Open https://console.cloud.google.com/google/maps-apis/overview
Create a new project. Make sure the type of project is MAP PLATFORM type if asked and Billing will be dollar $ USD based. You will have to setup a Billing account if you do not have a dollar $ billing account. Then click on Create. Note: Firebase creates a project in Google cloud also. Avoid using the same for the Google Maps project.
Click on Menu Icon -> API & Services -> Credentials
Click on "Create Credential"
Click on "Create Credential" Copy the API key. This will be used in code.
Couple of more steps required from some extra permissions. Click on API & Services -> Dashboard -> Enable APIs and Services
Enable All the APIs show below. Very Important
- Routes API
- Geocoding API
- Places API(NEW)
- Maps JavaScript API
- Maps SDK for IOS
- Maps SDK for Android
- Firebase Extensions API
This is how you enable each API. Enable all the 7
Note: Enable billing in this Google Cloud Platform. Very important.
Step 7 You should enter the Purchase Code in the /functions/config.json.
Step 8 Go to firebase console and Click on Authetication Menu. Click on Sign-in-Method. Click on Google icon then enter your email id now click on Save button and follow the instruction as show in pictures
Step 9 Click on Authetication Menu and click on Sign-in Method and hover on Email/ Password pencil icon and follow the instruction as show in pictures
Similarly enable the Phone Auth as shown below
Similarly enable the Apple Auth as shown below. Also add the Bundle Indentifier in the "Service ID"
Step 10 Create a project in https://expo.dev by logging with your Expo account
Try to use the same Firebase Project Id in Slug
Click to open the project
Copy the Owner, Slug and ID in the expo_owner, expo_slug and expo_project_id of config.json respectively
Step 11 In admin_email field use Admin email id which will create admin account with this email id
Note: This will be the same email you will use to login as Admin user.
5. Deploying the Web App plus Server Side
Run the below commands to run and deploy the web app.
Use Command Prompt in Administrator Mode if using MS Windows. Also note that when you make some changes in code, you have to repeat all these commands.
cd Sourecode
yarn
yarn deploy
After successfully deploying your project you will receive the hosted url in the terminal.
Open the URL mentioned in result of the last line of the command. Go to login and type the admin email you mentioned as admin_email on the config.json.
Use FORGOT PASSWORD to generate new password for Admin.
5.1 Add Payment Gateway
For activating any Payment Gateway, add the API keys of the payment gateway you want in the Payment Settings of Admin panel and make the active as true then click on Submit button.
6. Build Native Mobile App
Go into the Main code folder in Command Prompt
cd Sourecode
- For building Android
- For building IOS
yarn app:build-android
yarn app:build-ios
*For APK build run yarn app:build-android-apk
When anything asked in the process above, let eas build handle all the certificate and key generation for you.
7. Post Build Setup
7.1 Setting Push Notification for Android
For Android Push Notifications
-
Goto your Google cloud console and enable Firebase Cloud Messaging API
Go to Firebase Portal -> Project Settings -> Service accounts -> click the button to Generate new private key for the Firebase Admin SDK and download the JSON
Then Go your Expo account -> Select Project -> Project settings -> Credentials -> choose Android -> Application Identifier
Click the Add a service account key
Then Go Upload new key tab and select the JSON that you got from Firebase -> Service accounts section
7.2 Copy Android SHA-1 To Firebase
Go to Expo Account -> Select The Project -> Credentials
Click on Application Identifiers
Copy the SHA-1 Certificate Fingerprint
Go to your Firebase Portal -> Project Settings -> General -> Android apps -> Click on Add Fingerprint
Now paste the SHA-1 Certificate Fingerprint and Click on Save button
After Publish Your App in PlayStore Copy SHA-1 certificate fingerprint
And Paste It in your Firebase Portal -> Project Settings -> General -> Android apps -> Click on Add Fingerprint
7.3 Upload Apple APNs to Firebase
Go to Expo Account -> Select The Project -> Credentials
Click on Application Identifiers(IOS)
Go to Service Credentials > Push Key > Press Push Key Button and copy Key ID and Apple Team Identifier
Go to Firebase Portal -> Project Settings -> Cloud Messaging -> Apple app configuration -> Upload the downloaded Push Key in APNs Authentication Key
Browse the downloaded Push Key file and paste both Key ID and Apple Team Identifier Respectively
8. Additional Settings For Google Login
How To Set Google Login In Your Project
Go your google cloud console > APIs & Services > Credentials
Then click on Web client (auto created by Google Service)
Authorized JavaScript origins > add your web url(Firebase Portal -> Hosting -> Domains) and click on Save button
Then go your OAuth consent screen > then select External > click on create button
Then go Authorized domains section and add your web url(Firebase Portal -> Hosting -> Domains) and add your email id .
Then click on SAVE AND CONTINUE button
